<template>
  <div style="padding: 10px 30px;">
    <el-col :span="24" class="action-bar">
      <el-select v-model="reviewStatus" placeholder="审核状态">
        <el-option :value="0" :label="'待审核'" />
        <el-option :value="1" :label="'通过'" />
        <el-option :value="2" :label="'拒绝'" />
      </el-select>

      <el-button type="primary" size="medium" style="margin-left:20px;" @click="searchData">检索</el-button>
      <el-button size="medium" style="margin-left:20px;" @click="resetSearch">重置</el-button>
    </el-col>

    <el-table stripe :data="tableData" v-loading="tableLoadingShow" element-loading-text="加载中" style="width: 100%" class="el_table_style" :header-cell-style="{background:'#eef1f6',color:'#606266'}">

      <el-table-column width="100" label="序号" prop="id"></el-table-column>
      <el-table-column label="UPC码" prop="upc"></el-table-column>
      <el-table-column label="商品名称" prop="name">
        <template slot-scope="scope">
          <div style="color: #00a0e9;cursor: pointer" @click="getGoodsDetail(scope.row.id)">
            <el-col>{{scope.row.name}}</el-col>
          </div>
        </template>
      </el-table-column>

      <!--<el-table-column label="商品ID|商品名称" :render-header="renderheader">
        <template slot-scope="scope">
          <div style="color: #00a0e9;cursor: pointer" @click="getGoodsDetail(scope.row.id)">
            <el-col>{{scope.row.id}}</el-col>
            <el-col>{{scope.row.name}}</el-col>
          </div>
        </template>
      </el-table-column>-->
      <el-table-column label="封面图" >
        <template slot-scope="scope">
          <div @click="showImgDialog(scope.row.thumb_url)">
            <img :src="scope.row.thumb_url" alt="" style="width:60px;height:60px;object-fit:cover;margin-right: 15px">
          </div>
        </template>
      </el-table-column>
      <!--<el-table-column label="售价" :render-header="renderheader">
        <template slot-scope="scope">
          <el-col></el-col>
          <el-col>{{scope.row.selling_price}}</el-col>
        </template>
      </el-table-column>-->
      <!--<el-table-column prop="classify_name" label="商品分类"></el-table-column>-->
      <!--<el-table-column label="展示状态">
        <template slot-scope="scope">
          {{scope.row.is_shop_name}}
        </template>
      </el-table-column>-->
      <!--<el-table-column prop="merchant_name" label="所属门店"></el-table-column>-->
      <el-table-column prop="created_at" label="提交时间"></el-table-column>
      <el-table-column label="审核状态|审核时间" :render-header="renderheader">
        <template slot-scope="scope">
          <el-tag type="primary" v-if="scope.row.review==0">{{scope.row.review_name}}</el-tag>
          <el-tag type="success" v-else-if="scope.row.review==1">{{scope.row.review_name}}</el-tag>
          <el-tag type="danger" v-else-if="scope.row.review==2">{{scope.row.review_name}}</el-tag>
          <div v-else>{{scope.row.review_name}}</div>
          <div v-if="scope.row.review!=0">{{scope.row.updated_at}}</div>
        </template>
      </el-table-column>
      <!--<el-table-column fixed="right" label="操作" width="250px">
        <template slot-scope="scope">

        </template>
      </el-table-column>-->
    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background :page-size="10" layout="prev, pager, next" :total="totalPage" @current-change="pageChange">
        </el-pagination>
      </div>
    </el-col>

    <!-- 商品详情模态款 -->
    <el-dialog title="商品详情" :visible.sync="detailVisible">
      <h1 class="h-title">基本信息</h1>
      <el-form :label-position="'left'" label-width="120px" v-if="goodsDetail" >
        <el-form-item label="UPC码" >
          <div>{{goodsDetail.upc}}</div>
        </el-form-item>
        <el-form-item label="商品图片" >
          <div>
            <img v-for="(item,index) in goodsDetail.thumb_url" :key="index" :src="item" @click="showImgDialog(item)" alt="" style="width:60px;height:60px;object-fit:cover;margin-right: 15px">
          </div>
        </el-form-item>
        <el-form-item label="商品名称" >
          <div>{{goodsDetail.name}}</div>
        </el-form-item>
        <el-col class="user-detail-pets-col">
          <!--<el-form-item class="spec-col-left" label="商品分类" >
            <div>{{goodsDetail.classify_id}}</div>
          </el-form-item>-->
          <el-form-item label="商品ID" >
            <div>{{goodsDetail.id}}</div>
          </el-form-item>
        </el-col>
        <h1 class="h-title">参数</h1>
        <el-col class="user-detail-pets-col">
          <el-form-item class="spec-col-left" label="生产厂商" >
            <div>{{goodsDetail.manufacturer}}</div>
          </el-form-item>
          <el-form-item label="批准文号" >
            <div>{{goodsDetail.approval_number}}</div>
          </el-form-item>
        </el-col>

        <el-col class="user-detail-pets-col">
          <el-form-item class="spec-col-left" label="规格" >
            <div>{{goodsDetail.specification}}</div>
          </el-form-item>
          <el-form-item label="电子监管码" >
            <div>{{goodsDetail.electronic_regulatory_code}}</div>
          </el-form-item>
        </el-col>

        <el-col class="user-detail-pets-col">
          <el-form-item class="spec-col-left" label="用法用量" >
            <div>{{goodsDetail.usage_and_dosage}}</div>
          </el-form-item>
          <el-form-item label="适应症" >
            <div>{{goodsDetail.indications}}</div>
          </el-form-item>
        </el-col>

        <el-col class="user-detail-pets-col">
          <el-form-item class="spec-col-left" label="适应人群" >
            <div>{{goodsDetail.adapt_to_the_crowd}}</div>
          </el-form-item>
          <el-form-item label="成分" >
            <div>{{goodsDetail.component}}</div>
          </el-form-item>
        </el-col>

        <el-col class="user-detail-pets-col">
          <el-form-item class="spec-col-left" label="不良反应" >
            <div>{{goodsDetail.adverse_reactions}}</div>
          </el-form-item>
          <el-form-item label="禁忌" >
            <div>{{goodsDetail.contraindications}}</div>
          </el-form-item>
        </el-col>

        <el-col class="user-detail-pets-col">
          <el-form-item class="spec-col-left" label="注意事项" >
            <div>{{goodsDetail.precautions}}</div>
          </el-form-item>
          <el-form-item label="药物相互作用" >
            <div>{{goodsDetail.interaction}}</div>
          </el-form-item>
        </el-col>

        <el-col class="user-detail-pets-col">
          <el-form-item class="spec-col-left" label="儿童用药" >
            <div>{{goodsDetail.medication_for_children}}</div>
          </el-form-item>
          <el-form-item label="妊娠与哺乳用药" >
            <div>{{goodsDetail.medication_for_pregnancy_x_lactation}}</div>
          </el-form-item>
        </el-col>

        <el-col class="user-detail-pets-col">
          <el-form-item class="spec-col-left" label="老年人用药" >
            <div>{{goodsDetail.medication_for_aged}}</div>
          </el-form-item>
          <el-form-item label="性状" >
            <div>{{goodsDetail.properties}}</div>
          </el-form-item>
        </el-col>

        <el-col class="user-detail-pets-col">
          <el-form-item class="spec-col-left" label="包装" >
            <div>{{goodsDetail.packing}}</div>
          </el-form-item>
          <el-form-item label="剂型" >
            <div>{{goodsDetail.dosage_form}}</div>
          </el-form-item>
        </el-col>

        <el-col class="user-detail-pets-col">
          <el-form-item class="spec-col-left" label="贮藏" >
            <div>{{goodsDetail.storage}}</div>
          </el-form-item>
          <el-form-item label="药理作用" >
            <div>{{goodsDetail.pharmacological_action}}</div>
          </el-form-item>
        </el-col>

        <el-form-item class="spec-col-left" label="有效期" >
          <div>{{goodsDetail.expiry_date}}</div>
        </el-form-item>

        <h1 class="h-title">商品详情</h1>
        <div v-html="goodsDetail.detail"></div>

      </el-form>
    </el-dialog>


    <!-- 展示图片 -->
    <el-dialog :title="'查看图片'" :visible.sync="imgDialogShow" >
      <el-form :label-position="'left'" label-width="150px">
        <div align="center"><img :src="imgDialogUrl" alt="" style="max-width:400px;margin:0 auto"></div>
      </el-form>
    </el-dialog>
    <!-- 展示图片 -->

  </div>
</template>

<script>
    export default {
      name: "apply_list",
      data() {
        return{
          test: '',
          test2: '',
          id: '',
          page: 1,
          totalPage: 0,
          tableData: [],
          tableLoadingShow: false,
          editFormVisible: false,
          detailVisible: false,
          pageTotal: '',
          goodsDetail: '',
          reviewStatus: '',
          imgDialogUrl: '',
          imgDialogShow: false
        }
      },
      mounted() {
        this.getGoodsList();
      },
      methods: {
        //分页
        pageChange(e) {
          this.page = e;
          this.getGoodsList();
        },

        searchData() {
          this.page = 1;
          this.getGoodsList()
        },

        resetSearch() {
          this.page = 1;
          this.reviewStatus = ''
          this.getGoodsList()
        },

        //
        async getGoodsList(){
          this.tableLoadingShow = true;
          this.page = this.page
          let params = {
            limit:8,
            page:this.page,
            review: this.reviewStatus
          }
          const res = await this.$api.getGoodsApplyList(params);
          if(res.data.level=='success'){
            let list = res.data.data;
            this.tableData = list;
            this.pageTotal = res.data.page_info.total
          }else {
            this.$message.error(res.data.message)
          }
          this.tableLoadingShow = false;
        },

        //获取商品详情
        async getGoodsDetail(id) {
          const loadingOne = this.$loading({
            lock: true,
            text: '加载中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          const res = await this.$api.getGoodsApplyDetail({id: id});
          this.detailVisible = true;
          if(res.data.level=='success'){
            this.goodsDetail = res.data.data;
            //商品详情设置
            if(this.goodsDetail.detail){
              this.goodsDetail.detail = this.goodsDetail.detail.replace(/<img[^>]*>/gi, function (match, capture) {
                return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '')
              });
              this.goodsDetail.detail = this.goodsDetail.detail.replace(/\<img/gi, '<img style="max-width:100%;height:auto;vertical-align: top;" ');
            }
          }else{
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
          loadingOne.close()
        },

        //上架
        async spreadOn(id) {
          let judge = null;
          let tit = '上架?';
          try {
            judge = await this.$confirm(tit, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
          } catch (error) {
            judge = 'cancel'
          }
          if (judge == 'confirm') {
            this.setDemandShopStatus(1, id)
          }
        },

        //下架
        async spreadOff(id) {
          let judge = null;
          let tit = '下架?';
          try {
            judge = await this.$confirm(tit, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
          } catch (error) {
            judge = 'cancel'
          }
          if (judge == 'confirm') {
            this.setDemandShopStatus(2, id)
          }
        },


        //删除商品
        async delGoods(id){
          let _this = this;
          const params = {
            id:id,
          }
          //删除
          const judge= this.$confirm('删除该商品?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async() => {
            let res = await this.$api.delGoods(params)
            if(res.data.level=='success'){
              _this.getGoodsList();
              this.$message({
                type: 'success',
                message: res.data.message
              });
            }else{
              this.$message({
                type: 'error',
                message: res.data.message
              });
            }
          }).catch(() => {
          });
        },

        //展示图片
        showImgDialog(url){
          this.imgDialogUrl = url;
          this.imgDialogShow = true;
        },

        // 表头换行
        renderheader(h, { column, $index }) {
          return h('span', {}, [
            h('span', {}, column.label.split('|')[0]),
            h('br'),
            h('span', {}, column.label.split('|')[1])
          ])
        },
      }
    }
</script>

<style scoped>
  .action-bar{
    background-color: #f2f2f2;
    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;
  }
  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px 0;
    margin: 10px 0px;
    box-sizing: border-box;
  }

  /* 图片上传css */
  .avatar-uploader /deep/.el-upload {
    border: 1px dashed #807979;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .user-detail-pets-col{
    /*display: flex;*/
  }

  .spec-col-left{
    /*width: 300px;*/
  }

  .h-title{
    color: #333333;
    font-size: 25px;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  /deep/.el-table td, /deep/.el-table th {
    text-align: center;
  }
  /deep/.el-table .warning-row {
    background: #f8f9fa;
  }

  /deep/.el-table .success-row {
    background: #ffffff;
  }
  /deep/.el_table_style{
    border: 1px solid #dee2e6;
  }
  /deep/.el-table td {
    border: none;
  }
</style>
